<template>
  <div>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" style="margin-top:-80px;" @close="editDialogClose()">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="margin-top:-25px;">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单：" prop="parentId">
              <el-popover
                ref="menuListPopover"
                placement="bottom-start"
                trigger="click"
              >
                <el-tree
                  ref="menuListTree"
                  :data="menuOptions"
                  :props="menuListTreeProps"
                  node-key="menuId"
                  :default-expand-all="false"
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  @current-change="previousMenuSelect"
                />
              </el-popover>
              <el-input v-popover:menuListPopover :value="form.parentId === 0?'一级菜单':form.parentName" :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型：" prop="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="form.menuType && form.menuType != 'F'" label="菜单图标：">
              <el-popover
                placement="bottom-start"
                width="460"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                  <svg-icon
                    v-if="form.icon"
                    slot="prefix"
                    :icon-class="form.icon"
                    class="el-input__icon"
                    style="width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单名称：" prop="menuName">
              <el-input v-model="form.menuName" maxlength="50" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="form.menuType && form.menuType == 'C'" label="组件路径：" prop="componentPath">
              <el-input v-model="form.componentPath" maxlength="200" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="form.menuType && form.menuType == 'C'" label="路由地址：" prop="routePath">
              <el-input v-model="form.routePath" maxlength="200" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="form.menuType && form.menuType != 'M'" label="权限标识：">
              <el-input v-model="form.permissionIdentifier" maxlength="500" placeholder="请权限标识" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType && form.menuType != 'F'" label="导航栏显示：" prop="visible">
              <el-radio-group v-model="form.visible">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单状态：" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType && form.menuType != 'F'" label="显示排序：" prop="orderNum">
              <el-input-number v-model="form.orderNum" :max="9999" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType && form.menuType == 'C'" label="是否外链：" prop="isOutside">
              <el-radio-group v-model="form.isOutside">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input v-model="form.remark" maxlength="500" placeholder="备注" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="float:right;margin-bottom:-20px;">
              <el-button v-loading="dialogLoading" size="medium" type="primary" @click="submitForm">确 定</el-button>
              <el-button size="medium" type="danger" @click="editDialogClose()">取 消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import IconSelect from '@/components/IconSelect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { treeDataTranslate } from '@/utils'
export default {
  components: { IconSelect },
  data() {
    return {
      title: '新增菜单',
      open: false,
      dialogLoading: false,
      menuOptions: [],
      visibleOptions: [],
      form: {
        menuName: '',
        parentId: '',
        parentName: '',
        orderNum: '',
        routePath: '',
        componentPath: '',
        isOutside: '',
        menuType: '',
        visible: '',
        permissionIdentifier: '',
        icon: '',
        status: '',
        remark: ''
      },
      // 表单校验
      rules: {
        parentId: [
          { required: true, message: '上级菜单不能为空', trigger: 'blur' }
        ],
        menuType: [
          { required: true, message: '菜单类型不能为空', trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        componentPath: [
          { required: true, message: '组件路径不能为空', trigger: 'blur' }
        ],
        routePath: [
          { required: true, message: '路由地址不能为空', trigger: 'blur' }
        ],
        visible: [
          { required: true, message: '请选择是否导航栏显示', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择菜单状态', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ],
        isOutside: [
          { required: true, message: '请选择菜单是否外链', trigger: 'blur' }
        ]
      },
      menuListTreeProps: {
        id: 'menuId',
        label: 'menuName',
        children: 'children'
      }
    }
  },
  methods: {
    /**
     * 对话框关闭回调方法
     */
    editDialogClose() {
      this.form = {
        menuName: '',
        parentId: '',
        parentName: '',
        orderNum: '',
        routePath: '',
        componentPath: '',
        isOutside: '',
        menuType: '',
        visible: '',
        permissionIdentifier: '',
        icon: '',
        status: '',
        remark: ''
      }
      this.open = false
    },
    // 菜单树选中
    previousMenuSelect(data, node) {
      this.form.parentId = data.menuId
      this.form.parentName = data.menuName
    },
    /** 对话框初始化 */
    init(id) {
      this.getMenuOptions()
      if (id) {
        this.title = '编辑菜单'
        this.getMenuInfo(id)
      } else {
        this.title = '新增菜单'
        this.open = true
      }
    },
    click() {

    },
    selected(name) {
      this.form.icon = name
    },
    /**
     * 获取菜单信息
     */
    getMenuInfo(id) {
      this.httpRequest({
        url: '/sys/menu/info/' + id,
        method: 'get'
      }).then((response) => {
        if (response.code === 0) {
          this.form = response.body
          this.open = true
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    /**
     * 获取所有的菜单信息
     */
    getMenuOptions() {
      this.httpRequest({
        url: '/sys/menu/getAllMenu',
        method: 'get'
      }).then((response) => {
        if (response.code === 0) {
          this.menuOptions = treeDataTranslate(response.body, 'menuId')
          this.menuOptions.push({ 'menuId': 0, 'menuName': '一级菜单' })
          console.log(JSON.stringify(this.menuOptions))
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    /**
     * 提交表单
     */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.dialogLoading = true
          if (this.form.menuId) {
            this.httpRequest({
              url: '/sys/menu/update',
              method: 'post',
              data: this.form
            }).then((response) => {
              if (response.code === 0) {
                this.$message.success('菜单修改成功')
                this.editDialogClose()
                this.$emit('refreshData')
              } else {
                this.$message.error(response.msg)
              }
              this.dialogLoading = false
            })
          } else {
            this.httpRequest({
              url: '/sys/menu/save',
              method: 'post',
              data: this.form
            }).then((response) => {
              if (response.code === 0) {
                this.$message.success('菜单新增成功')
                this.editDialogClose()
                this.$emit('refreshData')
              } else {
                this.$message.error(response.msg)
              }
              this.dialogLoading = false
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .mod-menu {
    .menu-list__input,
    .icon-list__input {
      > .el-input__inner {
        cursor: pointer;
      }
    }
    &__icon-popover {
      max-width: 370px;
    }
    &__icon-list {
      max-height: 304px;
      padding: 0;
      margin: -8px 0 0 -8px;
      > .el-button {
        padding: 8px;
        margin: 8px 0 0 8px;
        > span {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }
    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
